<template>
<div>  
  <!-- 顶部菜单 -->
  <div class="header">
    <div class="logo"><a href="javascript:;" @click="gotoDefault"><span class="icon-lxb"></span>后台管理系统</a></div>
    <div class="time">{{currentDay}}</div>
    <div class="menu">
      <ul class="menu-ul">
        <li class="menu-li" :class="{'current': index==0 }" v-for="(item, index) in topMenus"><a href="javascript:;" @click="changeTopMenu(item.rightsId, item.rightsName, $event)">{{ item.rightsName }}</a></li>
      </ul>
    </div>
    <div class="menu menu-fr">
      <ul class="menu-ul">
        <li class="menu-li menu-btn">
          <a href="javascript:;" id="menuSub" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
          <ul class="menu-sub-ul" aria-labelledby="menuSub">
            <li :class="{'current': index==0 }" v-for="(item, index) in topMenus"><a href="javascript:;" @click="changeTopMenu(item.rightsId, item.rightsName, $event)">{{ item.rightsName }}</a></li>
          </ul>
        </li>
        <li class="menu-li">
          <a href="javascript:;" id="menuSubOut" data-toggle="dropdown">{{currentUser}}，欢迎您！<span class="glyphicon glyphicon-triangle-bottom"></span></a>
          <ul class="menu-sub-ul" aria-labelledby="menuSubOut">
            <li><a href="#" data-toggle="modal" data-target="#logoutTipsModal">退出</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <!-- 弹窗1 -->
  <div class="modal fade" id="logoutTipsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">确定要退出吗？</h4>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="doLogout">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>  
</template>

<script>
import {dateTool} from '../common/tools'

export default {
  name: 'vHeader',
  computed: {
    currentDay : dateTool.nowStr,
    currentUser: function () {
      return this.$getStorage('realName');
    }
  },
  methods: {
    gotoDefault: function () {
      this.$goDefaultPage();
    },
    doLogout: function () {
      var self = this;
      self.$doGet('/admin/logout', null, function(resp) {
        $('#logoutTipsModal').modal('hide');
        self.$clearSessionCache();
        self.$goRoute({ name: 'login' });
      });
    },
    changeTopMenu: function (rightsId, rightsName, event) {
      jQuery(event.target).parent('li').addClass('current').siblings().removeClass('current');
      this.$emit('change-top-menu', rightsId, rightsName);
    }
  },
  props: ['topMenus'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>